<template>
  <div class="homeBox">
    <headerCommon></headerCommon>
    <div class="containerbox">
      <div class="bannerImg">
        <img :src="require('@/assets/caseImg/caseBanner.jpg')" alt="" />
      </div>
      <ul class="goodsBox w1200">
        <li v-for="i in 5">
          <div class="goodSitem">
            <div class="goodSitem-top" @click="linkTo(item)">
              <img :src="require('@/assets/caseImg/img001.jpg')" alt width="230" height="200" />
              <p class="title">智慧养老</p>
              <span class="desc">
                科技助力美好生活
              </span>
            </div>
            <div class="addShopcar"></div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import headerCommon from '@/components/common/headerCommon'
export default {
  naem: '案例中心',
  components: {
    headerCommon,
  },
  props: {},
  data() {
    return {}
  },
  methods: {},
  mounted() {},
}
</script>

<style lang="less" scoped>
.homeBox {
  background: #fff;
  height: 100%;
  overflow: hidden;
  .bannerImg {
    text-align: center;
    width: 1920px;
    margin: 0 auto;
  }
  .containerbox {
    .goodsBox {
      flex-wrap: wrap;
      display: flex;
      height: 600px;
      > li {
        padding: 16px;
        background: #ffffff;
        box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.1);
        opacity: 1;
        border-radius: 15px;
        width: 272px;
        margin: 8px;
        transition: all 0.3s;
        box-sizing: border-box;
        &:hover {
          margin-top: -3px;
          box-shadow: 4px 4px 10px #e8e8e8;
        }
        &:last-of-type {
          margin-right: 0;
        }
        .goodSitem {
          .goodSitem-top {
            cursor: pointer;
          }
          .title {
            font-size: 16px;
            font-family: var(--font-family);
            font-weight: 500;
            line-height: 25px;
            color: #383938;
          }
          .desc {
            display: inline-block;
            font-size: 14px;
            font-family: var(--font-family);
            font-weight: 400;
            color: #666;
          }
          .addShopcar {
            margin-top: 20px;
            > button {
              font-size: 8px;
              font-family: Proxima Nova;
              font-weight: 600;
              background: #000;
              padding: 6px 10px;
              color: #ffffff;
              border-radius: 18px;
            }
            .salePrice {
              display: flex;
              justify-content: space-between;
              align-items: center;
              > del {
                font-size: 16px;
                font-family: var(--font-family);
                font-weight: 400;
                line-height: 20px;
                color: #9fa3a8;
              }
              > span {
                font-size: 20px;
                font-family: var(--font-family);
                font-weight: 400;
                margin-left: 8px;
                line-height: 20px;
                color: #e4393c;
              }
            }
          }
        }
      }
    }
  }
}
</style>
